<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/ajaxFileUpload.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .content {
            display: flex;
            flex-direction: column;
        }

        .mainForm {
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
        }

        .mainForm .van-field {
            width: 50%;
        }

        .van-field__label {
            width: auto;
        }

        .subForm {
            overflow-y: auto;
            flex: 1;
            padding: 5px;
            box-sizing: border-box;

        }

        .subFormItem {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding-bottom: 10px;
            align-items: center;

        }

        .subFormItem .van-field {
            flex: 1;
        }

        .subFormItem .van-cell {
            background-color: transparent;
        }

        .number {
            margin-left: 6px;
            line-height: 44px;
            display: flex;
        }

        .number span {
            margin: auto;
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            line-height: 1.5em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            text-align: center;
        }

        .bottomBtn {
            height: 50px;
            width: 100%;
            padding: 10px 10px;
            display: flex;
        }

        .bottomBtn .van-button {
            flex: 1;
            margin: 0 10px;
        }

        .van-cell {
            width: 50%;
        }

        .van-radio_group {
            width: 82%;
        }

        .van-radio-group {
            display: flex;
        }

        .van-radio-group .van-radio {
            flex: 1;
        }

        .van_uploaderDiv {
            width: 100px;
            height: 55px;
            line-height: 55px;
        }

        .van_uploader {
            padding: 0;
            margin: 0;
        }

        .van_deleteDiv {
            width: 25px;
            height: 25px
        }

        .van_uploaderi {
            font-size: 25px
        }

        .van-uploader_Div {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar :title="name + '明细'" id="safeTop" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="content">
                <div class="mainForm">
                    <van-field v-model="formData.SCQty" label="下架数量：" placeholder="请填写下架数量" readonly></van-field>
                    <van-field v-model="formData.SJQty" label="实际下架数量：" placeholder="请填写实际下架数量" type='number'>
                    </van-field>
                    <van-field v-model="formData.OperateDate" label="操作日期：" placeholder="请填写操作日期" readonly></van-field>
                    </van-field>
                    <div class="van-cell van-field" v-if='UserName=="质检员"'>
                        <div class="van-cell__title van-field__label">
                            <span>质检确认</span>
                        </div>
                        <div class="van-radio_group" style="display: flex;">
                            <van-radio-group v-model="formData.Status">
                                <van-radio name="1">是</van-radio>
                                <van-radio name="0">否</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="subForm">
                    <div class="subFormItem" v-for=" (item, index) in tableData">
                        <div class="number">
                            <span>{{index + 1}}</span>
                            <div>{{item.BadReasonName}}</div>
                        </div>

                        <van-stepper v-model="item.BadQty" min="0" default-value="0" button-size="38px"
                            input-width="50px">
                        </van-stepper>

                        <div class="van_uploaderDiv">
                            <van-field name="uploader" readonly class="van_uploader">
                                <template #input>
                                    <div class="van-uploader">
                                        <!-- 整行图片 -->
                                        <div class="van-uploader__wrapper">
                                            <!-- 单个照片 -->
                                            <div class="van-uploader__preview" v-for="(ite, idx) in item.imgList">
                                                <van-image @click="previewImg(index)" width="50" height="50"
                                                    :src="serverIP + ite.url">
                                                </van-image>
                                                <div @click="deleteImg(index,idx)"
                                                    class="van-uploader__preview-delete van_deleteDiv">
                                                    <i
                                                        class="van-icon van-icon-cross van-uploader__preview-delete-icon  van_uploaderi"></i>
                                                </div>
                                            </div>
                                            <!-- 上传图片的按钮 -->
                                            <div v-show="item.imgList.length < 1"
                                                class="van-uploader__upload van-uploader_Div"
                                                @change="uploadNewFile(index,index)">
                                                <i
                                                    class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon"></i>
                                                <input type="file" :name="'newFile'+index" :id="'newFile'+index"
                                                    accept="image/*" class="van-uploader__input">
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </van-field>
                        </div>
                        <div style="width: 250px;">
                            <van-field style="width: 100%;" v-model="item.Solution" label="备注：" placeholder="请填写备注">
                            </van-field>
                        </div>


                        <van-button type="danger" size="mini" @click="deleteItem(index)">删 &nbsp 除</van-button>
                    </div>
                </div>
                <div class="bottomBtn">
                    <van-button size="small" type="info" @click="confirm">提交</van-button>
                </div>
            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>


        </div>

    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        var photoBrowser = api.require('photoBrowser');

        api.addEventListener({
            name: 'getCDAlarmLList'
        }, function (ret) {
            APP.getCDAlarmLList()
        })
        api.addEventListener({
            name: 'getYCKBDataLiist'
        }, function (ret) {
            APP.getYCKBDataLiist()
        })
        vm = new Vue({
            el: '#app',
            data: {
                name: api.pageParam.name,
                serverIP: '',
                UserName: '',
                BLID: '',
                formData: {
                    JNo: '',
                    ProductName: '',
                    batch: '',
                    SJQty: '',
                    Status: '0',

                },
                tableData: [
                    {
                        MonitorIDBadDe: 0,
                        BadReasonName: '装配不良-返修',
                        BadReasonID: 0,
                        BadQty: '',
                        Solution: '',
                        imgList: []


                    },
                    {
                        MonitorIDBadDe: 0,
                        BadReasonName: '装配不良-报废',
                        BadReasonID: 0,
                        BadQty: '',
                        Solution: '',
                        imgList: []

                    },
                    {
                        MonitorIDBadDe: 0,
                        BadReasonName: '充电不良-返修',
                        BadReasonID: 0,
                        BadQty: '',
                        Solution: '',
                        imgList: []

                    },
                    {
                        MonitorIDBadDe: 0,
                        BadReasonName: '充电不良-报废',
                        BadReasonID: 0,
                        BadQty: '',
                        Solution: '',
                        imgList: []

                    },
                ],

            },
            created: function () {
                var that = this;
                window.localStorage.setItem('pageName', JSON.stringify(that.name))

                var userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
                if (userInfo && userInfo.UserName == '质检员') {
                    that.UserName = userInfo.UserName
                }
                that.serverIP = 'http://' + APP.serverIP

                if (api.pageParam.row) {
                    var obj = {
                        BLID: api.pageParam.row.BLID,
                        ProductID: api.pageParam.row.ProductID,
                        OperateDate: api.pageParam.row.OperateDate,
                        CJ: JSON.parse(window.localStorage.getItem('userInfo')).classID
                    }
                    APP.ajax('getXJBLDetail_new', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        // if (res.ds.length) {
                        // res.ds.map((item) => {
                        //     item.GSStartDate = item.GSStartDate ? item.GSStartDate.replace('T', ' ') : ''
                        //     item.GSSEndDate = item.GSSEndDate ? item.GSSEndDate.replace('T', ' ') : ''
                        //     item.CSDate = item.CSDate ? item.CSDate.replace('T', ' ') : ''
                        //     item.KJDate = item.KJDate ? item.KJDate.replace('T', ' ') : ''
                        // })
                        // if (res.ds1[0].BLID) {
                        //     that.BLID = res.ds1[0].BLID
                        // }
                        // that.BLID = res.ds[0].BLID == null ? '' : res.ds[0].BLID
                        that.BLID = res.ds[0].BLID
                        that.formData = res.ds1[0]
                        that.formData.Status = res.ds1[0].Status == null ? '0' : res.ds1[0].Status
                        that.formData.Status = res.ds1[0].Status == 1 ? '1' : '0'

                        if (res.ds2.length) {
                            res.ds2.map(ite => {
                                console.log(ite.FileList)
                                if (ite.FileList && ite.FileList != 'null') {
                                    ite.imgList = []
                                    ite.imgList.push({ url: ite.FileList })

                                } else {
                                    ite.imgList = []
                                }
                            })
                            console.log(JSON.stringify(res.ds2))

                            that.tableData = res.ds2
                            console.log(JSON.stringify(that.tableData))
                        }
                        // }
                    })
                }

                that.openScan()

            },
            mounted() {
                APP.setSafeTop()
                APP.keyBoardChange()
            },
            methods: {
                openScan() {
                    var that = this
                    var resultList = api.hasPermission({
                        list: ['camera']
                    });
                    console.log(JSON.stringify(resultList))
                    if (resultList[0].granted) {
                        // 已授权，可以继续下一步操作
                        console.log(JSON.stringify(resultList))

                        // that.uploadNewFile(index, idx)
                    } else {
                        api.confirm({
                            msg: '应用需要您的授权才能访问相机',
                            buttons: ['取消', '去设置']
                        }, function (ret) {
                            if (ret.buttonIndex == 2) {
                                api.requestPermission({
                                    list: ['camera'],
                                }, function (res) {
                                    if (res.list[0].granted) {
                                        // 已授权，可以继续下一步操作
                                        // that.uploadNewFile(index, idx)
                                    }
                                });
                            }
                        });
                    }
                },

                uploadNewFile(index, idx) {
                    var that = this
                    var url = that.serverIP + '/Frame/uploadImgFile?dirName=下架不良';

                    $.ajaxFileUpload({
                        type: 'POST',
                        url: url,
                        secureuri: false,
                        fileElementId: 'newFile' + index,
                        dataType: 'json',
                        success: function (res, status) {
                            if (res.status == 200) {
                                console.log(JSON.stringify(res.data.origin))
                                that.tableData[idx].imgList.push({ url: res.data.origin })
                                console.log('55555555' + JSON.stringify(that.tableData[idx].imgList))
                            } else {
                                vm.$toast('上传失败');
                            }
                        },
                        // error: function (data, status, e) {
                        //     console.log('失败data', JSON.stringify(data))
                        // }

                    });

                },
                deleteImg(index, idx) {
                    var that = this
                    that.tableData[index].imgList.splice(idx, 1)
                },
                previewImg(index) {
                    var that = this
                    document.activeElement.blur();
                    var imgFlag = 0
                    var imageArr = []
                    that.tableData[index].imgList.map((item) => {
                        imageArr.push(that.serverIP + item.url)
                    })
                    photoBrowser.open({
                        images: imageArr,
                        bgColor: '#000'
                    }, function (ret, err) {
                        if (ret) {
                            // alert(JSON.stringify(ret));
                            if (ret.eventType == 'show') {
                                imgFlag = 1
                            }
                            if (ret.eventType == 'click') {
                                imgFlag = 0
                                photoBrowser.close();
                            }
                        } else {
                            layer.open({
                                content: '图片打开失败，请重试！',
                                skin: 'msg',
                                time: 2
                            });
                        }
                    });
                },

                deleteItem(index) {
                    var that = this
                    that.tableData.splice(index, 1)
                },

                confirm() {
                    var that = this
                    that.tableData.map((item) => {
                        var obj
                        if (that.UserName == '质检员') {
                            obj = {
                                BLID: that.BLID,
                                MonitorIDBadDe: item.MonitorIDBadDe,
                                BadReasonName: item.BadReasonName,
                                BadReasonID: item.BadReasonID,
                                BadQty: item.BadQty,
                                Solution: item.Solution,
                                SJQty: that.formData.SJQty,
                                Status: that.formData.Status,
                                FileList: item.imgList.map(item => item.url).join(',')
                            }
                        } else {
                            obj = {
                                BLID: that.BLID,
                                MonitorIDBadDe: item.MonitorIDBadDe,
                                BadReasonName: item.BadReasonName,
                                BadReasonID: item.BadReasonID,
                                BadQty: item.BadQty,
                                Solution: item.Solution,
                                SJQty: that.formData.SJQty,
                                FileList: item.imgList.map(item => item.url).join(',')
                            }
                        }

                        console.log('obj', JSON.stringify(obj))
                        APP.ajax('saveXJBL_new', obj, function (res) {
                            api.toast({
                                msg: '提交成功！'
                            })
                            api.sendEvent({
                                name: 'refreshDisposeBadList'
                            })
                            setTimeout(() => {
                                api.closeWin();
                            }, 1000);
                        })
                    })

                },
                onClickLeft() {
                    var that = this
                    api.sendEvent({
                        name: 'refreshDisposeBadList'
                    })
                    api.closeWin()
                },
            }
        })
    };
</script>

</html>